<template>
  <div class="helpItems">
    <!-- 搜索关键字 -->
    <div class="headView">
      <div class="container">
        <div class="search">
          <div class="fsearch_left">
            <div class="search_inner">
              <div class="school">
                <el-dropdown @command="handleCommandSchool">
                <span class="el-dropdown-link">
                {{ schoolName }}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                  <el-dropdown-menu slot="dropdown">
                    <span v-for="school in schoolList" :key="school.id">
                    <el-dropdown-item :command="beforeCommand(school.id,school.schoolName)" >{{ school.schoolName }}</el-dropdown-item>
                    </span>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div class="input">
                <input v-model="title" type="text" placeholder="搜索订单">
              </div>
            </div>
            <div @click="search" class="search_btn">
            </div>
          </div>
          <div class="search_right" @click="toAddOrder">
            <span></span> 我要求助
          </div>
        </div>
        <div class="filter_Criteria">
          <div class="top">
            <div class="label_left">
              <p>
                <span>订单标签:</span>
              </p>
              <ul  v-for="label in labelList" :key="label.id">
                <li @click="selectByLable(label.id)">{{label.content}}</li>
              </ul>
            </div>
          </div>
          <div class="condition">
            <div class="label_left1">
              <ul>
                <li>
                  <el-dropdown @command="handleCommandCampus">
                    <span class="el-dropdown-link">
                    {{ campusName }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-if="!queryOrderInitiate.schoolId">请先选择学校</el-dropdown-item>
                      <span v-for="campus in campusList" :key="campus.id">
                      <el-dropdown-item v-if="queryOrderInitiate.schoolId" :command="beforeCommand(campus.id,campus.schoolName)">{{ campus.schoolName }}</el-dropdown-item>
                        </span>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
                <li>
                  <div class="block">
                  <el-date-picker
                      value-format="yyyy-MM-dd"
                      v-model="queryOrderInitiate.orderDate"
                      style="width: 160px"
                      size="mini"
                      type="date"
                      placeholder="选择订单日期"
                      :picker-options="pickerOptions">
                  </el-date-picker>
                </div>
                </li>
                <li>
                  <el-time-select
                      style="width: 140px"
                      size="small "
                      placeholder="订单起始时间"
                      v-model="queryOrderInitiate.orderStartTime"
                      :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30'
                    }">
                  </el-time-select>
                  <el-time-select
                      style="width: 140px"
                      size="small "
                      placeholder="订单结束时间"
                      v-model="queryOrderInitiate.orderEndTime"
                      :picker-options="{
                         start: '08:30',
                         step: '00:15',
                         end: '18:30',
                      }">
                  </el-time-select>
                </li>
                <li>
                <el-dropdown @command="handleCommandCredit">
                <span class="el-dropdown-link">
                订单发起人信誉({{credit}})<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="4.0">4.0</el-dropdown-item>
                    <el-dropdown-item command="3.0">3.0</el-dropdown-item>
                    <el-dropdown-item command="2.0">2.0</el-dropdown-item>
                    <el-dropdown-item command="1.0">1.0</el-dropdown-item>
                    <el-dropdown-item command="5.0">取消</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                </li>
              </ul>
            </div>
            <div class="str_right">
              <el-button type="text" @click="resetting">清空筛选条件</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="orderInfo">
      <OrderInfo v-for="a in orderInitiate.items" :key="a.cuid" v-bind="a"></OrderInfo>
      <div class="block">
        <el-pagination
            @current-change="handleCurrentChange"
            :page-size="this.params.pageSize"
            layout="prev, pager, next, total"
            :total="orderInitiate.counts">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import OrderInfo from "@/components/order/OrderInfo.vue";
import {mapState} from "vuex";
import {reqCampusList, reqLabelList, reqSchoolList} from "@/api";
export default {
  name: "HelpItemsIndex",
  components: {OrderInfo},
  data() {
    return{
      orderInitiateList: [],
      params: {pageNo: 1, pageSize: 7},
      queryOrderInitiate: {
        schoolId:undefined,
        campusId:undefined,
        labelId:undefined,
        orderDate:undefined,
        orderStartTime:undefined,
        orderEndTime:undefined,
        creditScore:undefined,
        title:undefined
      },
      title: '',
      schoolList:[],
      campusList:[],
      labelList:[],
      schoolName:'全部学校',
      campusName:'校区',
      credit:'全部',
      pickerOptions: {
        disabledDate(time) {
          var now = new Date();
          var date = now.getDate();
          return time.getTime() <  now.setDate(date - 1);
        },
      }
    }
  },
  async mounted() {
      await reqSchoolList().then((res)=>{
      this.schoolList = res
      console.log(this.schoolList)
    }), //获取标签信息
      await reqLabelList().then((res) => {
        this.labelList = res
      })
    if (this.$route.query.title){
      this.title = this.$route.query.title
      this.queryOrderInitiate.title = this.$route.query.title
      this.$route.query.title = ''
    }
    this.$store.dispatch('OrderInitiate',{params:this.params,queryOrderInitiate:this.queryOrderInitiate});
  },
  computed:{
    ...mapState({
      orderInitiate:state => state.helpOrderItems.orderInitiate
    })
  },
  methods:{
    search(){
      this.queryOrderInitiate.title = this.title
    },
    selectByLable(lableId){
      this.queryOrderInitiate.labelId=lableId
    },
    toAddOrder(){
      this.$router.push('/addOrder')
    },
    resetting(){
          this.queryOrderInitiate.schoolId=undefined,
          this.queryOrderInitiate.campusId=undefined,
          this.queryOrderInitiate.timeSort=undefined,
          this.queryOrderInitiate.labelId=undefined,
          this.queryOrderInitiate.orderDate=undefined,
          this.queryOrderInitiate.orderStartTime=undefined,
          this.queryOrderInitiate.orderEndTime=undefined,
          this.queryOrderInitiate.creditScore=undefined,
          this.schoolName='全部学校',
          this.campusName='校区',
          this.credit='全部'
      this.$store.dispatch('OrderInitiate',{params:this.params,queryOrderInitiate:this.queryOrderInitiate});
    },
    handleCurrentChange(val) {
      this.params.pageNo = val
      this.$store.dispatch('OrderInitiate',{params:this.params,queryOrderInitiate:this.queryOrderInitiate});
    },
    handleCommandCampus(command){
      this.queryOrderInitiate.campusId = command.id
      this.campusName=command.name
      // this.$store.dispatch('OrderInitiate',{params:this.params,queryOrderInitiate:this.queryOrderInitiate});
    },
    handleCommandCredit(command){
      this.queryOrderInitiate.creditScore = command
      this.credit = command
      // this.$store.dispatch('OrderInitiate',{params:this.params,queryOrderInitiate:this.queryOrderInitiate});
    },
    beforeCommand(id,name) {
     return{
       id: id,
       name: name
     }
    },
    handleCommandSchool(command){
      this.queryOrderInitiate.schoolId = command.id
      this.schoolName = command.name
      reqCampusList(command.id).then((res)=>{
        this.queryOrderInitiate.campusId = ''
        this.campusList = res
      })
      // this.$store.dispatch('OrderInitiate',{params:this.params,queryOrderInitiate:this.queryOrderInitiate});
    },
  },
  watch:{
  queryOrderInitiate:{
        deep: true,
        handler(){
          console.log('数据变了')
          this.$store.dispatch('OrderInitiate',{params:this.params,queryOrderInitiate:this.queryOrderInitiate});

        }
      }
  }
}
</script>

<style scoped>
body {
  position: relative;
}
.helpItems{

}
.block{
  text-align: center;
}

.orderInfo{
  width: 1184px;
  margin: 0 auto;
}
.headView {
  margin: 0 auto;
  padding: 40px 0 0 0;
  background-color: #fff;
}
.container{
  width: 1184px;
  margin: 0 auto;
  padding: 40px 0 0 0;
  background-color: #fff;
}
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fsearch_left {
  width: 884px;
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search_inner {
  flex: 1;
  height: 44px;
  display: flex;
  justify-content: space-between;
  border: 1px solid skyblue;
  border-right: none;
  box-sizing: border-box;
}

.search_inner .school {
  width: 109px;
  font-weight: 400;
  font-size: 13px;
  color: #61687c;
  border-right: none;
  line-height: 30px;
  padding: 6px 15px 8px 15px;
  background-color: #55cbc4;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
}

.search_inner .input {
  flex: 1;
  background: #fff;
  border-left: none;
  line-height: 42px;
  border-right: none;
  /* height: 42px; */
  overflow: hidden;
}

.search_inner .input input {
  outline: none;
  border: none;
}


.search_btn {
  width: 90px;
  height: 44px;
  color: #fff;
  transition: all linear .2s;
  background-image: url(./images/icons.png);
  background-repeat: no-repeat;
  background-position: 34px -138px;
  background-color: #55cbc4;
  border: 0;
  cursor: pointer;
  font-size: 0;
  width: 90px;
  padding: 0;
}

.search_btn:hover {
  background-color: #6adbcf;
}

.search_right {
  width: 284px;
  height: 44px;
  text-align: center;
  line-height: 44px;
  color: #53cac3;
  font-size: 14px;
  background: #fff;
  border: 1px solid #53cac3;
  color: #53cac3;
  font-size: 14px;
  cursor: pointer;
  float: left;
  position: relative;
  margin-left: 16px;
}

.search_right:hover .hide_a {
  display: block;
}

.search_right:hover {
  background-color: #fff;
}

.search_right a {
  position: absolute;
  right: 0;
  top: -14px;
  display: none;
  width: 18px;
  height: 18px;
  color: #61687c;
}

.search_right span {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(./images/box-login-icon.png) center/100% no-repeat;
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 10px;
}

.filter_Criteria {
  margin: 10px 0;
  font-size: 12px;
}


.filter_Criteria .top {
  height: 40px;
  line-height: 40px;
  border-condition: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
}

.filter_Criteria .top .label_left {
  display: flex;
  justify-content: space-between;
}

.filter_Criteria .top .label_left span {
  padding: 0 11px;
  color: #414a60;
}

.filter_Criteria .top .label_left ul {
  display: flex;
  justify-content: space-evenly;
}

.filter_Criteria ul li {
  padding: 0 11px;
  cursor: pointer;
}

.filter_Criteria ul li:hover {
  color: #fc6c38;
}

.filter_Criteria .middle {
  /* height: 40px; */
  line-height: 40px;
  border-condition: 1px solid #e0e0e0;
}

.filter_Criteria .middle ul {
  display: flex;
  flex-wrap: wrap;
}

.filter_Criteria .condition {
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
}

.filter_Criteria .condition .label_left1 ul {
  display: flex;
  justify-content: space-evenly;
}

.filter_Criteria .condition .label_left1 ul li:not(:first-child){
  margin-left: 40px;
}
.el-dropdown-link {
  cursor: pointer;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.filter_Criteria .condition .label_left1 ul li:hover {
  color: #414a60;
}

.filter_Criteria .condition .str_right {
  color: #8d92a1;
}

.filter_Criteria .condition .label_left ul li i {
  position: absolute;
  top: 10px;
  right: 46px;
  width: 16px;
  height: 16px;
  background-position: 0 -2044px;
  display: inline-block;
  background-image: url(./images/icons.png);
  background-repeat: no-repeat;
}

.menudrop>div {
  width: 100%;
  padding-left: 10px;
  box-sizing: border-box;
}

.menudrop>div:hover {
  background-color: rgb(242, 245, 249);
}


</style>
